<template>
  <div class="frame">
    <div class="circle-button" @click="closeView">
      <div class="close-icon">×</div>
    </div>
    <RulerCommend class="commend" v-show="Identity"/>
    <teacher-commend class="commend" v-show="!Identity"/>
    <div class="FileFrame">
      <div class="Show" v-show="isShow">
        <div class="circle-button" @click="isShow = false">
          <div class="close-icon">×</div>
        </div>
        <video width="100%" height="100%" v-if="showSrc2 && !showSrc" controls>
               <source :src="showSrc2">
        </video>
        <!-- <video v-if="showSrc2 && !showSrc" :src="showSrc2" width: "100% height: 100%;" controls></video> -->
        <img v-if="showSrc && !showSrc2" :src="showSrc" style="width: 100%; height: 100%;" />
      </div>
      <div
        v-for="(file, index) in fileList"
        @click="handleFileClick(file)"
        :key="index"
        class="files"
      >
        <div v-if="file.judge === 0" class="file-content" >
          <img :src="file.fileAddr" alt="视频" class="thumbnail" >
        </div>
        <div v-else-if="file.judge === 1" class="file-content">
          <img :src="file.fileAddr" alt="图片" class="image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TeacherCommend from '../components/TeacherCommend.vue';
import RulerCommend from "./RulerCommend.vue";
export default {
  components: { RulerCommend,TeacherCommend, },
  props:['fileList'],
  data() {
    return {
      Identity:true,
      showSrc:null,
      showSrc2:null,
      isShow:false,
    };
  },
  created(){
    if(sessionStorage.getItem('Identity')==='教师'){
      this.Identity=false;
    }
    if(sessionStorage.getItem('Identity')==='管理员'){
      this.Identity=true;
    }
  },
  methods: {
    reviewCommend(Text){
      this.$parent.reviewCommend(Text);
    },
    closeView(){
      this.$parent.closeView();
    },
    handleFileClick(file) {
      console.log(file);
      if (file.judge === 0) {
        console.log(1);
        this.playVideo(file.fileAddr);
      } else if (file.judge === 1) {
        console.log(2);
        this.showImage(file.fileAddr);
      } else {
        console.warn("不支持的文件类型");
      }
    },
    showImage(imagePath) {
      console.log("显示图片:", imagePath);
      this.showSrc2=null;
      this.showSrc=imagePath;
      this.isShow=true;
    },
    playVideo(videoPath) {
      console.log("播放视频:", videoPath);
      this.showSrc=null;
      this.showSrc2="E:\\Javafile\\java实验\\QQ录屏20231017210107.mp4";
      this.isShow=true;
    },
    getCommend(){
      return this.$parent.getCommend();
    }
  },
};
</script>

<style scoped>
.Show{
  position: fixed;
  top:70px;
  width:650px;
  height:400px;
  background-color: aquamarine;
  z-index: 140;
}
.circle-button {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 0;
  z-index: 150;
}


.close-icon {
  color: rgb(139, 139, 187); /* “×”符号的颜色 */
  font-size: 20px;
  font-weight: bold;
  z-index: 160;
}
.frame {
  position: relative; /* 父元素设置为相对定位 */
  height: 500px;
  width: 700px;
  border-radius: 10px;
  border: 1px solid rgb(139, 139, 187);
}
.FileFrame {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 650px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  z-index: 155;
}

.files {
  width: 100px;
  height: 70px;
  margin: 5px;
  margin-bottom: 10px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
}

.file-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumbnail,
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commend {
  position: absolute;
  top:-140px;
  height: 200px;
  width: 650px;
  z-index: 200;
}
</style>